﻿@using DAL;
@*@model List<DAL.Manager>*@
@using DataProj.Areas.BackSys.ServiceTools;
@{
    ViewBag.Title = "管理员管理";
    Layout = "../Shared/_LayoutBase.cshtml";
    string loginType = MySession.GetSession("loginType");
    string userName = MySession.GetSession("userName");
    //IList<Manager> managers = ViewBag.ManagerList;
    //int page = Convert.ToInt16(MySession.GetSession("managerPage"));
    //int rows = Convert.ToInt16(MySession.GetSession("managerRows"));
    //int totalPages = Convert.ToInt16(MySession.GetSession("managerTotalPages"));
}
@section CssLink{


}


<div id="app">
    <!-- header section end-->
<!-- page heading start-->
    <div class="page-heading">
    <h3>
        管理员数据
    </h3>
    <ul class="breadcrumb">
        <li>
            <a href="">物流管理系统</a>
        </li>
        <li>
            <a href="">管理员管理</a>
        </li>
        <li class="active"> 管理员数据表 </li>
    </ul>
</div>
    
<!-- page heading end-->
<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">

                <header class="panel-heading">
                    管理员数据表
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                    </span>
                </header>
                <div class="panel-body">
                    <div class="adv-table">
                        <table class="display table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="center hidden-phone">编号</th>
                                    <th class="center hidden-phone">账户昵称</th>
                                    <th class="center hidden-phone">账户密码</th>
                                    <th class="center hidden-phone">姓名</th>
                                    <th class="center hidden-phone">电话</th>
                                    <th class="center hidden-phone">身份证</th>
                                    <th class="center hidden-phone">注册日期</th>
                                    <th class="center hidden-phone">更新日期</th>
                                    <th class="center hidden-phone">操作</th>
                                </tr>
                            </thead>
                            <tbody id="table_body">
               

                                    <tr class="gradeA"   v-for="(manager,index) in managers" :key="index">
                                        <td v-bind:id="manager.ID" class="center hidden-phone"> {{manager.ID}}</td>
                                        <td class="center hidden-phone">
                                            {{manager.UserName}}
                                        </td>
                                        <td class="center hidden-phone">   {{manager.UserPass}}</td>
                                        <td class="center hidden-phone">   {{manager.TrueName}}</td>
                                        <td class="center hidden-phone">   {{manager.Phone}}</td>
                                        <td class="center hidden-phone">   {{manager.IDCard}}</td>
                                        <td class="center hidden-phone">   {{formatDateTime2(manager.AddTime)}}</td>
                                        <td class="center hidden-phone">   {{formatDateTime2(manager.UpdateTime)}}</td>
                                        <td class="center hidden-phone">
                                            <button  class="btn btn-default"    type="button" data-toggle="modal" data-target="#dispModal" v-on:click="get_info(manager.ID,'r')">查看</button>
                                            <button  class="btn btn-info"  type="button" data-toggle="modal" data-target="#updateModal" v-on:click="get_info(manager.ID,'w')">修改</button>
                                            <button  class="btn btn-danger"  type="button" data-toggle="modal" data-target="#delModal" v-on:click="delete_info(manager.ID)">删除</button>
                                        </td>
                                    </tr>
                               


                            </tbody>
                            @*<tfoot>
                                    <tr>
                                        <th>编号</th>
                                        <th>账户昵称</th>
                                        <th>账户密码</th>
                                        <th>姓名</th>
                                        <th>电话</th>
                                        <th>身份证</th>
                                        <th>注册日期</th>
                                        <th>操作</th>
                                    </tr>
                                </tfoot>*@
                        </table>
                        <ul class="pagination pull-right">
         
                                <li v-if="page<=1"  class="disabled"><a>&laquo;</a></li>
                                <li v-else><a  href="" v-on:click.prevent="changePage(page-1)">&laquo;</a></li>
                                <li v-for="i in totalPages"><a href="" v-on:click.prevent="changePage(i)">{{i}}</a></li>
                                <li v-if="page>=totalPages-1" class="disabled"><a>&raquo;</a></li>
                                <li v-else><a href="" v-on:click.prevent="changePage(page+1)">&raquo;</a></li>
                           

                        </ul>
                    </div>
                </div>

            </section>
        </div>

        <!-- 模态框示例（Modal） -->
        <form method="post" action="" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
            <div class="modal fade" id="dispModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                管理员员信息
                            </h4>
                        </div>
                        <div class="modal-body">
                                <div class="form-group">
                                    <label for="user_id" class="col-sm-3 control-label">人员编号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="ID" name="user_id" disabled="">

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-3 control-label">账户昵称</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="UserName" name="UserName" disabled="" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-3 control-label">账户密码</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="UserPass" name="GetName" disabled="" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">真实姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="TrueName" name="GetPhone" disabled="">

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">联系电话</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="Phone" name="GetAddress" disabled="" >

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">身份证号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="IDCard" name="IDCard" disabled="" >
                                    </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </form>

        <!-- 模态框示例（Modal） -->
        <form method="post" action="" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
            <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                管理员员信息
                            </h4>
                        </div>
                        <div class="modal-body">
                                <div class="form-group">
                                    <label for="user_id" class="col-sm-3 control-label">人员编号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="ID" name="update_ID">

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-3 control-label">账户昵称</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="UserName" name="update_UserName">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-3 control-label">账户密码</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="UserPass" name="update_UserPass">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">真实姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="TrueName" name="update_TrueName">
                                        @*<textarea class="form-control" name="remark" value="{remark}" id="remark"
                                            placeholder="备注">*@
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">联系电话</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="Phone" name="update_Phone">
                                    
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label">身份证号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" v-model="IDCard" name="update_IDCard">
                                    </div>
                                </div>

                        </div>
                        <div class="modal-footer">
                            <button  type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" v-on:click="check_form('update')" class="btn btn-primary">
                                提交
                            </button><span id="tip"> </span>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            </form>
        <!-- 模态框示例（Modal） -->
        <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
            <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" onclick="trigger_stay()" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                管理员员信息删除确认
                            </h4>
                        </div>
                        <div class="modal-body">
                                <div class="form-group">
                                    <label for="remark" class="col-sm-3 control-label center ">确认要删除吗?</label>
                                    @*<div class="col-sm-9">
                                            <input type="text" class="form-control" id="update_updateDate" name="updateDate">
                                        </div>*@
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button  type="button" class="btn btn-default" data-dismiss="modal">
                                取消
                            </button>
                            <!-- <button type="submit" onclick="trigger_delete()" class="btn btn-primary" data-dismiss="modal">
                                确认
                            </button><span id="tip"> </span> -->
                            <button type="button" v-on:click="check_form('delete')" class="btn btn-primary">
                                提交
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </form>
    </div>

</div>

</div>


@section JavascriptLink{
    @*<script src="../../../../Content/backSys/js/jquery.signalR-2.4.3.min.js"></script>
        <script src="/signalr/hubs" type="text/javascript"></script>*@

}
@section Javascript{

    <script>
           var vm = new Vue({
                el: "#app",
               data: {
                   managers: [],
                   page: 1,
                   totalPages: 1,
                   action:'kepp',
                        ID: '',
                        UserName: '',
                        UserPass: '',
                        TrueName: '',
                        Phone: '',
                        IDCard: '',
                        AddTime: '',
                        UpdateTime:''

                },
                methods: {
                    formatDateTime2:function(str) {
                        if (str == "") return str;
                        //console.log(str);
                        var now = new Date(str);
                        var year = now.getFullYear();  //取得4位数的年份
                        var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                        /*   if (month < 10) month = '0' + month;*/
                        var date = now.getDate();      //返回日期月份中的天数（1到31）
                        //if (date < 10) date = '0' + date;
                        var hour = now.getHours();     //返回日期中的小时数（0到23）
                        //if (hour < 10) hour = '0' + hour;
                        var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                        if (minute < 10) minute = '0' + minute;
                        var second = now.getSeconds(); //返回日期中的秒数（0到59）
                        if (second < 10) second = '0' + second;
                        return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
                    },


                    delete_info: function (id) {
                        this.ID = id;
                    },
                                // 编辑表单
                    get_info: function (id, type) {
                            //console.log('传入的id为:' + id + '.类型' + typeof (id));
                            var sendData = new FormData();
                            sendData.append('ID', id);
                            sendData.append('Action', $('#act').val());

                            if (id == null) {
                                alert('Error！');
                                return false;
                            }
                            id = id.toString();

                            axios({
                                method: "post",
                                data: sendData,
                                responseType: 'json',
                                // `transformRequest` 允许在向服务器发送前，修改请求数据
                                // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                                // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("GetItemByID", "Manager")"

                            }).then((data) => {
                                //console.log(data);
                                // 解析json数据
                                //var data = data;
                                //var data_obj = eval("(" + data + ")");
                                // 将JSON编码的字符串转换为JS对象
                                var data_obj = JSON.parse(data.data);
                                //tool =  new datesFn();
                                //console.log(typeof (data_obj.SendDate));
                                // 赋值
                                vm.ID = data_obj.ID;
                                vm.UserName = data_obj.UserName;
                                vm.UserPass = data_obj.UserPass;
                                vm.TrueName = data_obj.TrueName;
                                vm.Phone = data_obj.Phone;
                                vm.IDCard = data_obj.IDCard;

                            }).catch(error => {
                                alert(error);
                            });

                        },
                        // 提交表单
                        check_form:function (act) {
                            if (!vm.ID) {
                                alert('ID不能为空！');
                                return false;
                            }
                            var modal = '';
                            var sendData = new FormData();
                            var sendUrl = '';
                            if (act == 'update') {
                                modal = $('#updateModal');
                                sendUrl = "@Url.Action("Update", "Manager")";
                                sendData.append('ID', vm.ID);
                                sendData.append('Action', vm.act);
                                sendData.append('UserName', vm.UserName);
                                sendData.append('UserPass', vm.UserPass);
                                sendData.append('TrueName', vm.TrueName);
                                sendData.append('Phone', vm.Phone);
                                sendData.append('IDCard', vm.IDCard);

                            }else if (act == 'delete') {
                                modal = $('#delModal');
                                sendUrl = "@Url.Action("Delete", "Manager")";
                                sendData.append('ID', vm.ID);
                                sendData.append('Action', vm.act);
                            }
                            //console.log(sendData);
                            // 异步提交数据到action/GetBagItemByID页面
                            axios({
                                url: sendUrl,
                                method: "post",
                                responseType: 'json',
                                data: sendData,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    //$("#tip").html("<span style='color:blue'>正在处理...</span>");
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],

                            }).then((data) => {
                                //console.log(data);
                                // 将JSON编码的字符串转换为JS对象
                                if (data.data > 0) {
                                    //$("#tip").html("<span style='color:blueviolet'>" + act + "成功！</span>");
                                    commonUtil.message('成功', act + "OK！",'success')
                                    modal.modal('hide');
                                    this.changePage(this.page);
                                }
                                else {
                                    //$("#tip").html("<span style='color:red'>失败，请重试</span>");
                                    commonUtil.message('错误','操作失败','danger');
                                    modal.modal('hide');
                                }
                            }).catch(error => {
                                alert(error);
                            });

                    },


                    changePage: function (page) {
                        this.page = page;
                        formdata = new FormData();
                        formdata.append("pageNum", page);
                        formdata.append("action", $('#act').val());
                        //console.log(formdata);
                        axios({
                                method: "post",
                            responseType: 'json',
                            data: formdata,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("ChangePage","Manager")"
                        }).then((data) => {
                            //console.log(data.data);
                            data = JSON.parse(data.data);
                            totalPages = parseInt(data.totalPages);
                            dataArr = JSON.parse(data.data);
                            this.page = page;

                            this.totalPages = totalPages;
                            //console.log(this.totalPages);
                            this.managers = dataArr;
                                //console.log(managers);
/*                                vm.$forceUpdate();*/
                                //this.FillTable(data);
                            }).catch(error => {
                                alert(error);
                            });

                    }
                },
                watch: {
                    userName: {
                        deep: true,
                        handler(obj) {
                            console.log(obj);
                        }
                    },

               },
               mounted: function(){
                   this.changePage(0);
               },
               created() {
                   var act = $('#act').val()
                    $('#updateModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        //console.log($('#act').val());
                        if (act != 'keep') {
                            changePage(0);
                            //location.reload();
                        }
                    });
                    $('#delModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        if (act != 'keep') {
                            //location.reload();
                            changePage(0);
                        }

                    });

                }
            });
    </script>
}
